<template>
	<div class="lowerLevel">
		<div class="lowerLevel-title">
			<div class="lowerLevel-title-search">
				<img src="/static/images/agent-lowerLevel-serch.png" alt="" class="lowerLevel-title-search-icon">
				<input type="text" placeholder="请输入关键字" class="lowerLevel-title-search-input" v-model.trim="userNameValue">
				<div class="lowerLevel-title-search-btn" @click="searchUser()">搜索</div>
			</div>
			<van-checkbox v-model="checked" shape="square" checked-color="#00459E" @change="searchSwitch">模糊搜索</van-checkbox>
		</div>
		<div class="lowerLevel-content">
			<div class="lowerLevel-content-title">
                <div class="lowerLevel-content-title-scroll flex-s" :class="canAddAgent===false?'lowerLevel-content-title-scroll-2':''">
                    <div class="lowerLevel-content-title-left flex-b" :class="canAddAgent===false?'lowerLevel-content-title-left-2':''">
                        <div class="lowerLevel-content-title-list flex-c" :class="chosingTitle===1?'title-chosing':''" @click="switchTitle(1)">下级会员</div>
                        <div class="lowerLevel-content-title-list flex-c" v-if="canAddAgent" :class="chosingTitle===2?'title-chosing':''" @click="switchTitle(2)">下级代理</div>
                    </div>
                    <div class="lowerLevel-content-title-right flex-c" v-if="canAddAgent" @click="toCreatNewAgent">新增下级代理帐户</div>
                    <div class="lowerLevel-content-title-right flex-c" @click="showNewMemberPop = true">会员代注册</div>
                </div>
			</div>
			<div class="gray-line"></div>
			<div class="lowerLevel-content-show">
				<swiper :options="swiperOption" ref="mySwiper">
					<swiper-slide>
						<div class="lowerLevel-content-show-title" v-if="chosingTitle === 1">
							<div class="">登录名</div>
							 <div class="">代理备注</div>
							<div class="">级别</div>
						</div>
						<div class="lowerLevel-content-show-content" v-if="chosingTitle === 1">
							<div class="lowerLevel-content-show-content-list" @click="toAgentMemberDetail(index)" v-for="(item,index) in memberList" :key="index">
								<div class="">{{item.loginName}}</div>
								<div style="color: #0C408D" @click.stop="()=>{
                   show = true
                   memberId = item.memberId
                   nickName = item.agentMark || ''
								}">{{item.agentMark || '添加'}}</div>
								<div class="">{{item.level}}</div>
								<img src="/static/images/agent-lowerLevel-arrow.png" alt="" class="lowerLevel-content-show-content-icon">
							</div>
							<div class="load-more" v-if="hasMore && noData === false" @click="loadMore(1)">
								<span>点击加载更多</span>
								<img src="/static/images/agent-lowerLevel-loadMore.png" alt="" class="load-more-icon">
							</div>
							<div class="load-more" v-if="!hasMore && noData === false">
								<span>已加载全部</span>
							</div>
							<div class="no-data-box" v-if="noData">
								<img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
								<div class="no-data-fonts">暂无数据</div>
							</div>
						</div>
					</swiper-slide>
					<swiper-slide>
						<div class="lowerLevel-content-show-title" v-if="chosingTitle === 2">
							<div class="">登录名</div>
							<!-- <div class="">姓名</div> -->
							<div class="">代理级别</div>
						</div>
						<div class="lowerLevel-content-show-content" v-if="chosingTitle === 2">
							<div class="lowerLevel-content-show-content-list" @click="toAgentDetail(index)" v-for="(item,index) in agentList" :key="index">
								<div class="">{{item.loginName}}</div>
								<!-- <div class="">{{item.realName}}</div> -->
								<div class="">{{item.level}}</div>
								<img src="/static/images/agent-lowerLevel-arrow.png" alt="" class="lowerLevel-content-show-content-icon">
							</div>
							<div class="load-more" v-if="hasMore2 && noData2 === false" @click="loadMore(2)">
								<span>点击加载更多</span>
								<img src="/static/images/agent-lowerLevel-loadMore.png" alt="" class="load-more-icon">
							</div>
							<div class="load-more" v-if="!hasMore2 && noData2 === false">
								<span>已加载全部</span>
							</div>
							<div class="no-data-box" v-if="noData2">
								<img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
								<div class="no-data-fonts">暂无数据</div>
							</div>
						</div>
					</swiper-slide>
				</swiper>
			</div>
            <van-popup v-model="showNewMemberPop" class="creat-member-pop">
                <div class="creat-member-account">
                    <div class="new-member-title flex-c bold">新增会员</div>
                    <div class="new-members-remind">
                        <!-- <img src="/static/images/agent-home-remind.png" alt="" class="new-members-remind-icon"> -->
                        <span>*创建的会员账号，首次登录时，会要求设置一个新密码</span>
                    </div>
                    <div class="new-member-input-box">
                        <div class="user-name flex-s">
                            <img src="/static/images/agent-login-account.png" alt="" class="user-name-icon">
                            <div class="middle-gray-line"></div>
                            <input id="userName" type="text" maxlength="16" placeholder="支持5-12位字母和数字" v-model="accountInput">
                        </div>
                        <div class="user-name user-pwd flex-s">
                            <img src="/static/images/agent-login-pwd.png" alt="" class="user-name-icon ">
                            <div class="middle-gray-line"></div>
                            <input id="userPwd" type="password" maxlength="16" placeholder="密码最少8位，支持字母/数字/符号" v-model="pwdInput" ref="pwdInput">
                            <van-icon class="pwd-switch-icon" name="eye-o" v-if="showPwdValue" @click="switchPwdFn(1)"/>
                            <van-icon class="pwd-switch-icon" name="closed-eye"  v-if="!showPwdValue" @click="switchPwdFn(0)"/>
                        </div>
                        <div class="user-name user-pwd flex-s">
                            <img src="/static/images/agent-login-pwd.png" alt="" class="user-name-icon ">
                            <div class="middle-gray-line"></div>
                            <input id="userPwdCfm" type="password" maxlength="16" placeholder="请再次输入密码" v-model="cfmPwdInput" ref="cfmPwdInput">
                            <van-icon class="pwd-switch-icon" name="eye-o" v-if="showCfmPwdValue" @click="switchCfmPwdFn(1)"/>
                            <van-icon class="pwd-switch-icon" name="closed-eye"  v-if="!showCfmPwdValue" @click="switchCfmPwdFn(0)"/>
                        </div>
                    </div>
                    <div class="new-member-btn-box flex-c">
                        <div class="new-member-btn flex-c" @click="subCreatFn()">提交</div>
                        <div class="new-member-btn flex-c" @click="showNewMemberPop = false">取消</div>
                    </div>
                </div>
            </van-popup>
            <!--loading-new-->
            <div class="loading-new" v-if="showLoading">
                <img src="/static/images/allLoading.gif" alt="" />
            </div>
      <van-dialog @confirm="updateNickName" confirmButtonColor="#1B3D8E" confirmButtonText="提交" v-model="show" title="添加代理备注" show-cancel-button>
        <van-field v-model="nickName" label="代理备注" maxlength="10"/>
      </van-dialog>
		</div>

	</div>
</template>

<script>
import {Dialog} from 'vant';
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
let vm = null;
export default {
	name: 'lowerLevel',
	components: {
		swiper,
		swiperSlide,
	},
	data() {
		return {
      show:false,
      memberId:0,
      nickName:'',
			bannerImg: [],
			checked: true,
			chosingTitle: 1,
			loginName: '',
			userNameValue: '',
			blurry: true,
			memberList: [],
			agentList: [],
			pageNumber1: 1,
			pageNumber2: 1,
			hasMore: true,
			hasMore2: true,
			noData: false,
			noData2: false,
			canAddAgent:false,
			swiperOption: {
				loop: false,
				initialSlide: 0,
				onSlideChangeEnd: function (swiper) {
					vm.switchTitle(swiper.realIndex + 1)
				}
			},
            showNewMemberPop:false,
            accountInput:'',
            pwdInput:'',
            cfmPwdInput:'',
            showPwdValue:false,
            showCfmPwdValue:false,
            passwordType:'password',
            showLoading:false,
		}
	},
	beforeRouteLeave (to, from, next) {    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
		this.$destroy(true)
		next()
	},
	mounted() {
		this.loadTop();
	},
	created() {
		vm = this;
	},
	methods: {
    updateNickName(){
      this.ServerAPI.postAPI(this.API.updateNickName, {
        memberId:this.memberId,
        agentMark:this.nickName
      }, (success,data)=>{
        if(success && data.code === '0000'){
          this.$toastTop('提交成功', 1);
          const findItem=this.memberList.find(item=>item.memberId === this.memberId)
          this.$set(findItem, 'agentMark', this.nickName)
          console.log(findItem)
          this.show = false
        }else {
          this.$toastTop(data.info, 3);
        }
      })
    },
		loadTop() {
			this.getMemberList()
			this.getAgentList()
			this.agentInfo()
		},
		// userInfo() {
		// 	this.ServerAPI.postAPI(this.API.userInfo, '', (success,data)=>{
		// 		if(success){
		// 			if(data.code === '0000'){
		// 				if(data.data.level === '总代'){
		// 					this.canAddAgent = true
		// 				}else{
		// 					this.canAddAgent = false
		// 				}
		// 			}
		// 		}
		// 	})
		// },
		agentInfo() {
			this.ServerAPI.postAPI(this.API.getAgentInfo, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){
						if(data.data.agentLevel === '1'){
							this.canAddAgent = true
						}else{
							this.canAddAgent = false
						}
					}
				}
			})
		},
		getMemberList(){
			let params = {
				loginName:this.loginName,
				blurry:this.blurry,
				pageNumber:this.pageNumber1,
				pageSize:30
			}
			this.ServerAPI.postAPI(this.API.getMemberList,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						if(data.data.length === 30){
							this.hasMore = true
							this.noData = false
						}else if(data.data.length < 30){
							this.hasMore = false
							this.noData = false
						}
						this.memberList = this.memberList.concat(data.data)
						if(this.memberList.length === 0){
							this.noData = true
						}
					}
				}
			})
		},
		getAgentList(){
			let params = {
				loginName:this.loginName,
				blurry:this.blurry,
				pageNumber:this.pageNumber2,
				pageSize:30
			}
			this.ServerAPI.postAPI(this.API.getAgentList,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						if(data.data.length === 30){
							this.hasMore2 = true
						}else if(data.data.length < 30){
							this.hasMore2 = false
						}
						this.agentList = this.agentList.concat(data.data)
						if(this.agentList.length === 0){
							this.noData2 = true
							this.hasMore2 = false
						}else{
							this.noData2 = false
						}
					}
				}
			})
		},
		loadMore(value){
			if(value === 1){
				this.pageNumber1++
				this.getMemberList()
			}else if(vlaue === 2){
				this.pageNumber2++
				this.getAgentList()
			}
		},
		searchUser(){
			this.loginName = this.userNameValue
			this.pageNumber1 = 1
			this.pageNumber2 = 1
			this.memberList = []
			this.agentList = []
			this.loadTop()
		},
		searchSwitch(){
			this.blurry = this.checked
		},
		switchTitle(value){
			this.chosingTitle = value
			this.noData = false
			this.$refs.mySwiper.swiper.slideTo(value - 1, 500, true)
			// console.log(this.$refs.mySwiper.swiper.activeIndex)
		},
		toAgentMemberDetail(index){
			sessionStorage.setItem('memberId',this.memberList[index].memberId)
			this.$router.push('/lowerLevel-member')
		},
		toAgentDetail(index){
			sessionStorage.setItem('agentId',this.agentList[index].id)
			this.$router.push('/lowerLevel-agent')
		},
		toCreatNewAgent(){
			// if(this.canAddAgent === false){
			// 	Dialog.alert({
			// 		message: '您的代理帐号无法添加下级代理',
			// 		confirmButtonColor:'#00479d'
			// 	}).then(() => {
			// 		// on close
			// 	});
			// }else if(this.canAddAgent === true){
			// 	this.$router.push('/creatNewAgent')
			// }
            this.$router.push('/creatNewAgent')
		},
        switchPwdFn(val){
            this.showPwdValue = !this.showPwdValue
            if(val === 0){
                this.$refs.pwdInput.type = 'text'
            }else{
                this.$refs.pwdInput.type = 'password'
            }
        },
        switchCfmPwdFn(val){
            this.showCfmPwdValue = !this.showCfmPwdValue
            if(val === 0){
                this.$refs.cfmPwdInput.type = 'text'
            }else{
                this.$refs.cfmPwdInput.type = 'password'
            }
        },
        subCreatFn(){
            if(this.isEmpty(this.accountInput) === true){
                this.$toastTop('请输入账号', 3);
                return false
            }
            if(this.isEmpty(this.pwdInput) === true){
                this.$toastTop('请输入账号密码', 3);
                return false
            }
            if(this.isEmpty(this.cfmPwdInput) === true){
                this.$toastTop('请再次输入密码', 3);
                return false
            }
            if(this.pwdInput !== this.cfmPwdInput){
                this.$toastTop('两次密码输入不一致', 3);
                return false
            }
            this.showLoading = true
			let params = {
				loginName:this.accountInput,
				password:this.pwdInput,
				confirmPassword:this.cfmPwdInput,
			}
			this.ServerAPI.postAPI(this.API.addMember,params,(success,data)=>{
                this.showLoading = false
				if (success){
					if(data.code === 1){
                        Dialog.alert({
                            message: '代注册成功',
                            confirmButtonColor:'#00459E'
                        }).then(() => {
                            this.accountInput = ''
                            this.pwdInput = ''
                            this.cfmPwdInput = ''
                            this.showNewMemberPop = false
                            this.memberList = []
                            this.getMemberList()
                        });
					}else{
                        this.$toastTop(data.info, 3);
                    }
				}else{
                    this.$toastTop('网络慢，请稍后再试', 3);
				}
			})
        },
	}
}
</script>

<style lang="scss" scoped>
.lowerLevel {
	padding: .3rem 0 1.3rem;
	font-family: PingFang-SC-Medium;
	.lowerLevel-title {
		display: flex;
		justify-content: space-between;
		padding: 0 .2rem;
		.lowerLevel-title-search {
			position: relative;
			width: 70%;
			display: flex;
			align-items: center;
			background: rgb(238, 238, 238);
			height: .8rem;
			line-height: .8rem;
			border-radius: .5rem;
			.lowerLevel-title-search-icon {
				height: .4rem;
				margin: 0 .2rem;
			}

			.lowerLevel-title-search-input {
				width: 58%;
				background: none;
				border: none;
				outline: none;
			}
			.lowerLevel-title-search-btn {
				position: absolute;
				height: .6rem;
				line-height: .6rem;
				top: .1rem;
				right: .15rem;
				background: rgb(0, 71, 157);
				color: #FFFFFF;
				padding: 0 .2rem;
				border-radius: .5rem;
			}
		}
	}
	.lowerLevel-content {
		margin-top: .3rem;
		.lowerLevel-content-title {
			width: 94%;
			margin: 0 auto;
            overflow-x: auto;
            .lowerLevel-content-title-scroll {
                width: 8.4rem;
                .lowerLevel-content-title-left {
                    width: 3.4rem;
                    .lowerLevel-content-title-list {
                        width: 50%;
                        color: rgb(114,114,114);
                        height: .6rem;
                    }
                    .title-chosing {
                        font-weight: bold;
                        color: rgb(0, 71, 157);
                        border-bottom: rgb(0, 71, 157) 5px solid;
                    }
                }
                .lowerLevel-content-title-left-2 {
                    width: 1.7rem;
                    .lowerLevel-content-title-list {
                        width: 100%;
                    }
                }
                .lowerLevel-content-title-right {
                    width: 2.66rem;
                    height: .5rem;
                    line-height: .5rem;
                    background: #1B3D8E;
                    border-radius: .3rem;
                    color: #FFFFFF;
                    margin: 0 0 0 .2rem;
                    font-size: .26rem;
                }
                .lowerLevel-content-title-right:last-child {
                    width: 2rem;
                }
            }
            .lowerLevel-content-title-scroll-2 {
                width: unset;
            }
		}
		.gray-line {
			height: 1px;
			background: rgb(160,160,160);
		}
		.lowerLevel-content-show {
			padding: 0 .2rem;
			text-align: center;
			margin-top: .2rem;
			.no-data-box {
				text-align: center;
				margin-top: 1rem;
				.no-data-img {
					width: 3rem;
				}
				.no-data-fonts{
					color: rgb(176,182,190);
					font-size: .4rem;
					margin-top: .2rem;
				}
			}
			.lowerLevel-content-show-title {
				height: .8rem;
				background: rgb(220,220,220);
				border-radius: .5rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				div {
					// width: 33%;
					width: 50%;
					color: rgb(44,44,44);
					font-size: .28rem;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}
			}
			.lowerLevel-content-show-content {
				.lowerLevel-content-show-content-list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;
					border-bottom: rgb(220,220,220) 1px solid;
					div {
						// width: 33%;
						width: 50%;
						height: .8rem;
						line-height: .8rem;
						color: rgb(75,75,75);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
					}
					.lowerLevel-content-show-content-icon {
						position: absolute;
						height: .2rem;
						right: .3rem;
					}
				}
				.load-more {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #9C9C9C;
					margin-top: .15rem;
					.load-more-icon {
						height: .15rem;
						margin-left: .15rem;
					}
				}
			}
		}
	}
}
.creat-member-pop {
    border-radius: .08rem;
    overflow: hidden;
    padding: .14rem .08rem .4rem;
    .creat-member-account {
        .new-member-title {
            width: 100%;
            height: 0.68rem;
            border-bottom: #D1D1D1 1px solid;
            font-size: .3rem;
        }
		.new-members-remind {
			color: rgb(255,120,0);
			margin-top: .2rem;
            margin-left: .2rem;
			.new-members-remind-icon {
				height: .28rem;
				margin-right: .1rem;
			}
            span {
                font-size: .2rem;
            }
		}
        .new-member-input-box {
            width: 6.6rem;
            padding: .8rem .4rem;
            .user-name {
                padding: .2rem .22rem;
                border-radius: .1rem;
                background: rgb(238,238,238);
                .user-name-icon {
                    width: .26rem;
                    margin-left: .1rem;
                }
                .middle-gray-line {
                    height: .3rem;
                    width: 1px;
                    background: rgba(142,142,141,.5);
                    margin: 0 .2rem;
                }
                input {
                    width: 100%;
                    border: none;
                    font-size: .24rem;
                    background: rgb(238,238,238);
                }
            }
            .user-pwd {
                margin-top: .26rem;
                .pwd-switch-icon {
                    font-size: .3rem;
                }
            }
        }
        .new-member-btn-box {
            .new-member-btn {
                width: 2.8rem;
				height: .68rem;
				background: rgb(0, 71, 157);
				color: #FFFFFF;
				padding: 0 .2rem;
				border-radius: .1rem;
                font-size: .28rem;
            }
            .new-member-btn:last-child {
                background: #FFFFFF;
                border: #727272 1px solid;
                color: #727272;
                margin-left: .2rem;
            }
        }
    }
}
.swiper-container{
	position: relative;
	width: 100%;
}
.swiper-container .swiper-slide{
	width: 100%;
}
</style>
